<template>
  <view class="reportDetail">
    <view class="report-header">
      <view>
        <view class="report-header-title">
          {{ vuex_babyInfo.name }}宝宝的{{ Info.name }}报告
        </view>
        <view class="score-dis" @click="scoreStandard">
          <image
            src="@/static/health/prompt.png"
            style="width: 22rpx; height: 22rpx; margin-right: 10rpx"
          />
          <view>评分说明</view>
        </view>
      </view>

      <view class="process">
        <image :src="Info.img" style="width: 132rpx; height: 142rpx" />
        <view>
          <view class="score" v-if="Info.name == '心率'">
            <view class="value1" v-if="jugeNormal(Info.value) == 1">正常</view>
            <view class="value1" v-else-if="jugeNormal(Info.value) == 2"
              >未检测</view
            >
            <view class="value1" v-else style="color: red">异常</view>
          </view>

          <view class="score" v-else>
            <view class="value">{{ Info.points }}</view>
            <view class="unit">分</view>
          </view>

          <view style="width: 230rpx"
            >本次：{{
              Info.value == "0" || Info.value == null
                ? "未测评"
                : Info.value +
                  " " +
                  (Info.unit == ("无" || "") ? "" : Info.unit)
            }}</view
          >
          <view style="width: 230rpx"
            >上次：{{
              Info.old_value == 0
                ? "未测评"
                : Info.old_value +
                  " " +
                  (Info.unit == ("无" || "") ? "" : Info.unit)
            }}</view
          >
        </view>
      </view>

      <!-- <view class="report-notice">
        <image src="@/static/report/smile.png" class="smile" />
        <view class="smile-content u-line-2">
          宝宝身高长得不错哦，后期加强营养的摄 入会更好哦，继续加油哦~
        </view>
      </view> -->

      <!-- 更新时间 -->
      <view class="update-time">更新时间：{{ Info.update_time }}</view>
    </view>

    <view class="result">
      <view>{{ Info.item_desc }}</view>
      <view>测试结果仅供参考，不可作为医学诊断依据</view>
    </view>
  </view>
</template>

<script>
import { formatDate, getGrowAgeYear } from "@/common/utils";
export default {
  data() {
    return {
      project: "",
      Info: {}, //信息
    };
  },
  methods: {
    /**
     * 设置新标题
     */
    setNavigationBar(Info) {
      this.project = Info.name;
      uni.setNavigationBarTitle({
        title: Info.name,
      });
    },

    /**
     * 跳转到  对应项目的评分标准
     */
    scoreStandard() {
      this.$u.route({
        url: "pages/report/score",
        params: this.Info,
      });
    },

    /**
     * 当检测项 是心率的时候
     */
    jugeNormal(value) {
      console.log(value);
      if (value === null || parseInt(value) === 0) {
        return 2;
      } else if (parseInt(value) >= 70 && 120 >= parseInt(value)) {
        return 1;
      } else {
        return 0;
      }
    },
  },
  onLoad() {
    var option = this.vuex_lookReport;
    // 比如需要这样的格式 yyyy-MM-dd hh:mm:ss
    var date = new Date(option.updated_at * 1000);
    var Y = date.getFullYear() + "-";
    var M =
      (date.getMonth() + 1 < 10
        ? "0" + (date.getMonth() + 1)
        : date.getMonth() + 1) + "-";
    var D = date.getDate() + " ";
    var h = date.getHours() + ":";
    var m = date.getMinutes() + ":";
    var s = date.getSeconds();

    option.update_time = Y + M + D;
    this.Info = option;
    this.setNavigationBar(option);
  },
};
</script>

<style scoped lang ='scss' >
.reportDetail {
  min-height: 100vh;
  background-color: #f7f7f7;
  padding: 20rpx;
  .report-header {
    /* height: 163.5 * 2rpx; */
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 20rpx;
    & > view:nth-child(1) {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .report-header-title {
        color: #000000;
        font-size: 36rpx;
        font-weight: Bold;
        font-family: SourceHanSansCN-Bold;
        margin-top: 10rpx;
      }
      .score-dis {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }
    }
    .process {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      margin: 20rpx 0;
      & > view {
        color: #333333;
        font-size: 28rpx;
        font-weight: Regular;
        font-family: SourceHanSansSC-Regular;
        margin-left: 50rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        & > view {
          margin-bottom: 20rpx;
        }
        .score {
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
          align-items: flex-end;
          .value {
            color: #07c38f;
            font-size: 60rpx;
            font-weight: Bold;
            margin-right: 5rpx;
          }
          .value1 {
            color: #07c38f;
            font-size: 45rpx;
            font-weight: Bold;
            margin-right: 5rpx;
          }
          .unit {
            color: #07c38f;
            font-size: 20rpx;
            font-weight: Bold;
          }
        }
      }
    }

    .report-notice {
      height: 59 * 2rpx;
      background-color: #eefffa;
      margin-top: 40rpx;
      padding: 10rpx;

      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .smile {
        width: 77rpx;
        height: 77rpx;
        margin-right: 20rpx;
      }
      .smile-content {
        flex: 1;
        font-size: 28rpx;
        color: #07c38f;
        font-family: SourceHanSansCN-Regular;
        font-weight: Regular;
      }
    }

    .update-time {
      text-align: end;
      color: #999999;
      font-size: 20rpx;
      font-weight: Regular;
      margin: 20rpx 0;
    }
  }

  .result {
    background-color: #ffffff;
    padding: 20rpx;
    border-radius: 20rpx;
    margin-top: 30rpx;
    & > view:nth-child(1) {
      text-align: justify;
      text-indent: 2rem;
      color: #333333;
      font-size: 28rpx;
      font-weight: Regular;
    }
    & > view:nth-child(2) {
      color: #999999;
      text-align: end;
      font-size: 20rpx;
      font-weight: Regular;
      margin: 20rpx 0;
    }
  }
}
</style>
